<!-- Created Time:23/07/26 16:49:19 -->
<!-- Created By: Mande.Huang-->
<!-- Description: -->
<template>
  <div>
    <Glass class="header" id="header" ref="header">
      <div class="header_normal headerContain">
        <div class="left"></div>
        <div class="right">
          <div class="bluetooth">蓝牙</div>
          <div class="electricity">电量5%</div>
          <div class="pin">拼</div>
          <div class="wifi">wifi</div>
          <div class="search">搜索</div>
          <div class="control">控制面板</div>
          <div class="siri">siri</div>
          <div class="date">{{ month }}月{{ day }}</div>
          <div class="week">周{{ week }}</div>
          <div class="time">{{ nowTime }}</div>
        </div>
      </div>
      <div class="header_task headerContain">
        <div class="smallwindow">
          <div class="top active"></div>
          <div class="bottom">第一个窗口</div>
        </div>
        <div class="smallwindow">
          <div class="top"></div>
          <div class="bottom">第二个窗口</div>
        </div>
        <div class="smallwindow">
          <div class="top"></div>
          <div class="bottom">第二个窗口</div>
        </div>
        <div class="smallwindow">
          <div class="top"></div>
          <div class="bottom">第二个窗口</div>
        </div>
        <div
          class="addwindow"
          ref="addwindow"
          @mouseenter="onEnterAdd"
          @mouseleave="onLeaveAdd"
          @click="addWindow"
        >
          <div class="text">+</div>
        </div>
        <div class="virtuewindow" ref="virtuewindow">
          <div class="top"></div>
          <div class="bottom">第二个窗口</div>
        </div>
      </div>
    </Glass>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "Header",
  data() {
    return {
      nowTime: "",
      week: "",
      date: "",
      month: 1,
      day: 0,
      isShow: [true, false, false],
    };
  },
  created() {},
  computed: {
    isHeaderShowing() {
      return this.store.state.header.isShow;
    },
  },
  watch: {
    isHeaderShowing: {
      handler(newVal, oldVal) {
        let tl = this.gsap.timeline();
        let node = this.$el;
        if (!newVal && oldVal) {
          tl.to(node, {
            duration: 0.1,
            onComplete: () => {
              let headers = document.querySelectorAll(".headerContain");
              for (let i = 0; i < 2; i++) {
                headers[i].style.display = "none";
                this.isShow[i] = false;
              }
            },
          });
        } else {
          tl.to(node, {
            duration: 0.1,
            onComplete: () => {
              let headers = document.querySelectorAll(".headerContain");
              headers[0].style.display = "flex";
              this.isShow[0] = true;
            },
          });
        }
      },
      deep: true, // 深度监听
    },
  },
  mounted() {
    let headers = document.querySelectorAll(".headerContain");
    this.BindMouseEnter(headers);
    this.TimerInit();
  },
  methods: {
    addWindow() {},
    onEnterAdd() {
      const node = this.$refs.addwindow;
      const virnode = this.$refs.virtuewindow;
      let tl = this.gsap.timeline();
      tl.to(virnode, {
        duration: 0.2,
        right: -150 + "px",
      });
    },
    onLeaveAdd() {
      const virnode = this.$refs.virtuewindow;
      let tl = this.gsap.timeline();
      tl.to(virnode, {
        duration: 0.2,
        right: -250 + "px",
      });
    },
    TimerInit() {
      moment.locale("zh-cn");
      setInterval(() => {
        this.nowTime = moment().format("HH:mm");
        this.date = moment().format("MM月DD日");
      }, 50);
      let arr = moment().toArray();
      this.month = this.month + arr[1];
      this.day = arr[2];
      const weekStr = ["日", "一", "二", "三", "四", "五", "六"];
      this.week = weekStr[moment().day()];
    },
    BindMouseEnter(nodes) {
      nodes[1].addEventListener("mouseenter", () => {
        if (this.isShow[2]) {
          return;
        }
        this.Taskshow(1, 2, nodes);
      });
      document.addEventListener("keydown", (e) => {
        // 用ctrlKey,shiftKey,altKey的值来监听是否按下了这三个键,true表示按下了，false表示没有按下
        // 按下了control 和 向上的建之后执行 需要值得注意的是 e.ctrlKey 当 ctrl按下时候为真 否则为假
        if (e.key == "ArrowUp" && e.ctrlKey) {
          if (this.isShow[2]) {
            this.Taskshow(2, 0, nodes);
          } else if (this.isShow[0]) {
            this.Taskshow(0, 1, nodes);
          } else {
            this.Taskshow(1, 2, nodes);
          }
        }
      });
      // 感觉这里会因为数据事件捕获和冒泡问题出现bug 记得回来修改
      document.addEventListener("mousedown", (e) => {
        if (e.target.classList[0] != "home") return;
        if (this.isShow[1]) {
          this.Taskshow(1, 0, nodes);
        } else if (this.isShow[2]) {
          this.Taskshow(2, 0, nodes);
        } else {
          return;
        }
      });
    },
    /**
     *
     * @param {要消失的状态栏} index1
     * @param {要显示的状态栏} index2
     * @param {传入两个个状态栏节点} nodes
     */
    Taskshow(index1, index2, nodes) {
      this.isShow[index1] = false;
      this.isShow[index2] = true;
      let tl1 = this.gsap.timeline();
      let tl2 = this.gsap.timeline();
      switch (index1) {
        case 0:
          tl1.to(nodes[0], {
            duration: 0.1,
            opacity: 0,
            onComplete: () => {
              nodes[0].style.display = "none";
              nodes[1].style.display = "flex";
            },
          });
          break;
        case 1:
          if (index2 == 0) {
            tl1.to(nodes[1], {
              duration: 0.1,
              height: 0,
              onComplete: () => {
                nodes[1].style.display = "none";
                nodes[0].style.display = "flex";
              },
            });
          }
          break;
        case 2:
          const nodetops = nodes[1].querySelectorAll(".top");
          nodetops.forEach((item) => {
            item.style.display = "none";
          });
          tl1.to(nodes[1], {
            duration: 0.2,
            height: 0,
            onComplete: () => {
              nodes[1].style.display = "none";
              nodes[0].style.display = "flex";
            },
          });
          break;
      }
      switch (index2) {
        case 0:
          nodes[0].style.opacity = 0;
          tl2.to(
            nodes[0],
            {
              duration: 0.3,
              opacity: 1,
            },
            "+=0.2"
          );
          break;
        case 1:
          nodes[1].style.height = 0;
          tl2.to(
            nodes[1],
            {
              duration: 0.2,
              height: 3.5 + "vh",
            },
            "+=0.2"
          );
          break;
        case 2:
          const nodetops = nodes[1].querySelectorAll(".top");
          nodetops.forEach((item) => {
            item.style.display = "flex";
            item.style.opacity = 0;
          });
          nodes[1].style.height = 3.5 + "vh";
          tl2.to(
            nodes[1],
            {
              duration: 0.2,
              height: 16 + "vh",
              onComplete: () => {
                let tl3 = this.gsap.timeline();
                tl3.to(nodetops, {
                  duration: 0.1,
                  opacity: 1,
                });
              },
            },
            "+=0.2"
          );
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.header {
  z-index: 9999;
  top: 0;
  width: 100%;
  position: absolute;

  .header_normal {
    display: flex;
    height: 2.5vh;

    .left {
      flex: 1;
    }

    .right {
      flex: 1;
      display: flex;
      justify-content: right;
      line-height: 100%;

      div {
        // 文字 图标 居中
        line-height: 2.5vh;
        margin: 0 5px 0 5px;
      }

      .time {
        margin-right: 8px;
        padding-left: 2px;
      }
    }
  }

  .header_task {
    height: 16vh;
    display: none;
    flex-direction: row;
    justify-content: center;
    .smallwindow {
      margin-top: 10px;
      margin-right: 20px;
      height: 90%;
      width: 10%;
      display: flex;
      flex-direction: column;
      .top {
        display: none;
        flex: 7;
        background-color: red;
      }
      .active {
        border-radius: 5px;
        border: 2px solid rgb(77, 53, 212);
      }
      .bottom {
        margin-top: 0px;
        line-height: normal;
        text-align: center;
        flex: 2;
      }
    }
    .virtuewindow {
      margin-top: 10px;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      height: 90%;
      width: 10%;
      position: absolute;
      right: -250px;
      .top {
        display: none;
        flex: 7;
        background-color: red;
      }
      .bottom {
        margin-top: 0px;
        line-height: normal;
        text-align: center;
        flex: 2;
      }
    }

    .smallwindow:last-child {
      margin-right: none;
    }
    .addwindow {
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      position: absolute;
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      right: 150px;
      font-size: 30px;
      cursor: pointer;
      transition: all 8s none;
      .text {
        transform: translate(0, -2px);
      }
    }
    .addwindow:hover {
      background-color: #fff;
    }
  }
}
</style>
